.home-banner {
  &-swiper {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;

    &-pagination {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 20px;
      text-align: center;

      .swiper-pagination-bullet {
        display: inline-block;
        width: 12px;
        height: 2px;
        border-radius: 5px;
        background: var(--white);
        margin: 0 2px;
        opacity: 0.3;
        transition: opacity 0.5s, width 0.5s;
        vertical-align: middle;

        &-active {
          width: 18px;
          opacity: 1;
        }
      }
    }
  }
}
